<script setup lang="ts">
import Taro from '@tarojs/taro';
import {
  foodTags,
  shoppingTags,
  transportTags,
  houseTags,
  entertainmentTags,
  medicalTags
} from '@/constants/defaultTags';
import { useTagStore } from '@/store/modules/tag';
const tagStore = useTagStore();
const activeNames = ref([0]);
const tagList = [
  { name: ' 餐饮 ', tags: foodTags },
  { name: ' 购物 ', tags: shoppingTags },
  { name: ' 交通 ', tags: transportTags },
  { name: ' 居住 ', tags: houseTags },
  { name: ' 娱乐 ', tags: entertainmentTags },
  { name: ' 医疗 ', tags: medicalTags }
];
const selectItem: any = ref('');
function select(item: TagItem) {
  selectItem.value = item;
}
function switchBack() {
  if (selectItem.value !== '') {
    tagStore.insertTag(selectItem.value);
    tagStore.chosenselectOutItem = selectItem.value;
  }
  Taro.navigateBack({});
}
watch(
  () => tagStore.tagListError,
  val => {
    if (val === 'duplicate') {
      Taro.showToast({
        title: '所选类型已存在',
        icon: 'error'
      });
      tagStore.tagListError = '';
    }
  }
);
</script>

<template>
  <basic-layout show-tab-bar>
    <custom-nav-bar title="其他" />

    <nut-row type="flex" justify="space-between" class="pt-2">
      <nut-col :span="4" @tap="Taro.navigateBack()">
        <IconFont
          name="rect-left"
          style="height: var(--nut-button-default-height, 76rpx); width: var(--nut-button-default-height, 76rpx)"
        ></IconFont>
      </nut-col>
      <nut-col :span="10">
        <text
          style="height: var(--nut-button-default-height, 76rpx); line-height: var(--nut-button-default-height, 76rpx)"
        >
          添加支出类型
        </text>
      </nut-col>
      <nut-col :span="4"></nut-col>

      <nut-col :span="6">
        <nut-button type="primary" @tap="switchBack">
          <template #icon>
            <IconFont name="checklist"></IconFont>
          </template>
          确定
        </nut-button>
      </nut-col>
    </nut-row>
    <nut-collapse v-model="activeNames">
      <nut-collapse-item v-for="(item, ind) in tagList" :key="ind" :title="item.name" :name="ind">
        <ul class="flex flex-row tagItemUl">
          <li
            v-for="(itemT, index) in item.tags"
            :key="index"
            class="tagItem"
            :class="selectItem.value === itemT.value ? 'selected' : ''"
            @tap="select(itemT)"
          >
            <tagItem :tag-item="itemT"></tagItem>
          </li>
        </ul>
      </nut-collapse-item>
    </nut-collapse>
  </basic-layout>
</template>
<style>
.tagItemUl {
  flex-wrap: wrap;
}

.tagItem {
  width: 25%;
  padding: 12px 0;
  font-size: 12px;
  display: flex;
  color: --nut-primary-color;
  flex-direction: column;
  align-items: center;
}
</style>
